<template class="container">
    <!-- <div style="margin-top: 10px; height: 150px; background-color: #ff0000; display: flex; align-items: center; justify-content: center;">
        <div style="height: 100px; width: 100px; background-color: #00ff00;"></div>
    </div>
    <div style="margin-top: 10px; height: 150px; background-color: #ff0000; display: flex; align-items: center; justify-content: space-between;">
        <div style="height: 100px; width: 100px; background-color: #00ff00;"></div>
        <div style="height: 100px; width: 100px; background-color: #0000ff;"></div>
    </div>
    <div style="margin-top: 10px; height: 150px; background-color: #ff0000; display: flex; align-items: center; justify-content: space-around;">
        <div style="height: 100px; width: 100px; background-color: #00ff00;"></div>
        <div style="height: 100px; width: 100px; background-color: #0000ff;"></div>
    </div> -->

    <!-- <div style="margin-left: 10px; width: 150px; background-color: #ff0000; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;">
        <div style="height: 100px; width: 100px; background-color: #00ff00;"></div>
    </div>
    <div style="margin-left: 10px; width: 150px; background-color: #ff0000; display: inline-flex; flex-direction: column; align-items: center; justify-content: space-between;">
        <div style="height: 100px; width: 100px; background-color: #00ff00;"></div>
        <div style="height: 100px; width: 100px; background-color: #0000ff;"></div>
    </div>
    <div style="margin-left: 10px; width: 150px; background-color: #ff0000; display: inline-flex; flex-direction: column; align-items: center; justify-content: space-around;">
        <div style="height: 100px; width: 100px; background-color: #00ff00;"></div>
        <div style="height: 100px; width: 100px; background-color: #0000ff;"></div>
    </div>
    <div style="margin-left: 10px; width: 150px; background-color: #ff0000; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end;">
        <div style="height: 100px; width: 100px; background-color: #00ff00;"></div>
        <div style="height: 100px; width: 100px; background-color: #0000ff;"></div>
    </div>
    <div style="margin-left: 10px; width: 150px; background-color: #ff0000; display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start;">
        <div style="height: 100px; width: 100px; background-color: #00ff00;"></div>
        <div style="height: 100px; width: 100px; background-color: #0000ff;"></div>
    </div> -->

    <div style="margin-top: 10px; height: 150px; background-color: #ff0000; display: flex; align-items: center; justify-content: center;">hello world</div>
</template>
    
<script type="text/lua">
</script>
    
<style>
.container {
    width: 100%;
    height: 100%;
    background-color: #00000080;
}
</style>